<template>
  <el-dialog
    :title="!form.jobId ? '添加任务' : '修改任务'"
    :close-on-click-modal="false"
    v-model="isShow"
    width="600px"
    @close="close"
  >
    <el-form ref="rulesForm" :model="form" :rules="rules" label-width="120px">
      <div class="search-form2">
        <el-form-item label="任务名称" prop="jobName">
          <el-input v-model="form.jobName"></el-input>
        </el-form-item>
        <el-form-item label="任务分组" prop="jobGroup">
          <el-select v-model="form.jobGroup" placeholder="请选择">
              <el-option
                v-for="dict in jobGroupOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
        </el-form-item>
      </div>
      <el-form-item label="调用方法" prop="invokeTarget">
        <template #label>
          <span>
            调用方法
            <el-tooltip placement="top">
              <template #content>
                <div>
                Bean调用示例：ryTask.ryParams('ry')
                <br />Class类调用示例：com.yun.quartz.task.RyTask.ryParams('ry')
                <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
              </div>
              </template>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
        <el-input v-model="form.invokeTarget"></el-input>
      </el-form-item>
      <div class="search-form2">
        <el-form-item label="cron表达式" prop="cronExpression">
          <el-input v-model="form.cronExpression"></el-input>
        </el-form-item>
         <el-form-item label="是否并发" prop="concurrent">
          <el-radio-group v-model="form.concurrent" size="small">
            <el-radio-button :label="true">允许</el-radio-button>
            <el-radio-button :label="false">禁止</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </div>
      <el-form-item label="错误策略" prop="misfirePolicy">
        <el-radio-group v-model="form.misfirePolicy" size="small">
          <el-radio-button label="1">立即执行</el-radio-button>
          <el-radio-button label="2">执行一次</el-radio-button>
          <el-radio-button label="3">放弃执行</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.jobId" label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="true">正常</el-radio>
          <el-radio :label="false">暂停</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import { reactive, watch, computed, toRefs, ref, defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import dialog from '@/mixins/dialog'
import { StateType as TaskStateType, Job } from '@/store/modules/monitor/timedTask'
import { DictData } from '@/store/modules/system/dictData'

interface DataType {
  form: Job;
  rules: object;
}

export default defineComponent({
  name: 'AuTimiedTask',
  emits: ['onRefresh', 'close'], // this line
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const { dialogM } = dialog(props, context)
    const store = useStore<{timedTask: TaskStateType}>()
    const data = reactive<DataType>({
      form: {
        jobId: null,
        jobName: '',
        jobGroup: '',
        invokeTarget: '',
        cronExpression: '',
        misfirePolicy: '',
        businessType: '',
        status: false,
        concurrent: false
      },
      rules: {
        jobName: [
          { required: true, message: '任务名称不能为空', trigger: 'blur' }
        ],
        invokeTarget: [
          { required: true, message: '调用目标字符串不能为空', trigger: 'blur' }
        ],
        cronExpression: [
          { required: true, message: 'cron执行表达式不能为空', trigger: 'blur' }
        ]
      }
    })
    const jobGroupOptions = computed<Array<DictData>>(() => {
      return store.state.timedTask.jobGroupOptions
    })
    const rulesForm = ref<HTMLElement>()
    const taskData = computed<Job>(() => {
      return store.state.timedTask.data
    })
    const getInfo = () => {
      const id = taskData.value ? taskData.value.jobId : null
      if (id) {
        store.dispatch('timedTask/getInfo', id).then(res => {
          data.form = res.data
        })
      }
    }
    watch(() => props.value, (val) => {
      if (val) {
        getInfo()
      } else {
        data.form = {
          jobId: null,
          jobName: '',
          jobGroup: '',
          invokeTarget: '',
          cronExpression: '',
          misfirePolicy: '',
          businessType: '',
          status: false,
          concurrent: false
        }
        rulesForm.value && (rulesForm.value as any).resetFields()
      }
    })
    const submit = () => {
      (rulesForm.value as any).validate((valid: boolean) => {
        if (valid) {
          if (taskData.value) {
            store.dispatch('timedTask/update', data.form).then(() => {
              ElMessage({
                message: '修改成功',
                type: 'success'
              })
              context.emit('onRefresh')
              dialogM.close()
            })
          } else {
            store.dispatch('timedTask/add', data.form).then(() => {
              ElMessage({
                message: '新增成功',
                type: 'success'
              })
              context.emit('onRefresh')
              dialogM.close()
            })
          }
        }
      })
    }
    return {
      ...toRefs(dialogM),
      ...toRefs(data),
      rulesForm,
      submit,
      jobGroupOptions
    }
  }
})
</script>
